<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">优惠券</block>
		</cu-custom>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in allList" :key="index"
				 @tap="tabSelect" :data-id="index">
					{{item.title}}
				</view>
			</view>
		</scroll-view>
		<view v-for="(item,index) in allList" :key="index">
			<view class="cu-list" v-for="(coupon, coupon_index) in item.list" :key="coupon_index" v-if="index ==TabCur">
				<couponView :value="coupon"></couponView>
			</view>
		</view>
	</view>
</template>

<script>
	import couponView from '@/components/shop/marketing/couponView.vue'
	export default {
		components: {
			couponView
		},
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				allList: [{
					title: '未领取',
					state: 1,
					list: [],
					page: 1,
					hasMore: true,
					loading: false
				}, {
					title: '已领取',
					state: 1,
					list: [],
					page: 1,
					hasMore: true,
					loading: false
				}, {
					title: '已使用',
					state: 2,
					list: [],
					page: 1,
					hasMore: true,
					loading: false
				}, {
					title: '已过期',
					state: 3,
					list: [],
					page: 1,
					hasMore: true,
					loading: false
				}],
			};
		},
		filters: {},
		onLoad() {
			this.getIndex(this.TabCur)
		},
		methods: {
			tabSelect(e) {
				if (this.TabCur != e.currentTarget.dataset.id) {
					this.TabCur = e.currentTarget.dataset.id
					this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
					this.getIndex(this.TabCur)
				}
			},
			getIndex(index) {
				let obj = this.allList[index]
				if (obj.hasMore && !obj.loading) {
					this.allList[index].loading = true
					if (index == 0) {
						this.$http
							.get('marketing_coupon_type_index', {
								page: obj.page
							})
							.then((response) => {
								let list = obj.list
								if (response.data.data.length > 0) {
									if (list.length > 0)
										list = list.concat(response.data.data)
									else list = response.data.data
									this.allList[index].list = list
								} else {
									this.allList[index].hasMore = false
								}
								this.allList[index].page += 1
								this.allList[index].loading = false
								console.log(this.allList)
								uni.stopPullDownRefresh()
							})
							.catch((response) => {
								this.allList[index].loading = false
								uni.stopPullDownRefresh()
							})
					} else {
						this.$http
							.get('marketing_coupon_type_myget', {
								page: obj.page,
								state: obj.state
							})
							.then((response) => {
								console.log(response)
								let list = obj.list
								if (response.data.data.length > 0) {
									if (list.length > 0)
										list = list.concat(response.data.data)
									else list = response.data.data
									this.allList[index].list = list
								} else {
									this.allList[index].hasMore = false
								}
								this.allList[index].page += 1
								this.allList[index].loading = false
								console.log(this.allList)
								uni.stopPullDownRefresh()
							})
							.catch((response) => {
								this.allList[index].loading = false
								uni.stopPullDownRefresh()
							})
					}
				} else
					uni.stopPullDownRefresh()
			},
		},
		onPullDownRefresh() {
			this.getIndex(this.TabCur)
		},
	}
</script>

<style>
</style>
